<!DOCTYPE html>
<meta name="viewport" content="width=device-width"/>
<style>
    body {
        font-family: sans-serif;
    }

    .container {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border: 1px solid black;
        width: 1920px;
        height: 1080px;
        overflow: hidden;
    }

    @media screen and (max-width: 1920px) {
        .container {
            transform: translate(-50%, -50%) translateY(-100px) scale(0.5);
        }
    } 
    video {
        width: 100%;
        position: absolute;
    }

    .transition {
        position: absolute;
        z-index: 10;
        width: 100%;
        height: 1200px;
        font-size: 0;
        transform: scale(1);
        top: 50%;
        transform: translateY(-50%);

    }

    .squares {
        position: relative;
        white-space: nowrap;
    }
    .square {
        display: inline-block;
        width: 400px;
        height: 400px;
        background: #333;
        transform: rotate(45deg);
    }
    .squares:nth-child(2n + 1) {
        left: -200px;
    }
</style>
<div class="container">
    <div class="transition">
        <div class="squares">
            <div class="square"></div>
            <div class="square"></div>
            <div class="square"></div>
            <div class="square"></div>
            <div class="square"></div>
            <div class="square"></div>
            <div class="square"></div>
        </div>
        <div class="squares">
            <div class="square"></div>
            <div class="square"></div>
            <div class="square"></div>
            <div class="square"></div>
            <div class="square"></div>
        </div>
        <div class="squares">
            <div class="square"></div>
            <div class="square"></div>
            <div class="square"></div>
            <div class="square"></div>
            <div class="square"></div>
            <div class="square"></div>
            <div class="square"></div>
        </div>
    </div>
    <video id="clapper" playsinline>
        <source src="./clapper.webm" type="video/webm"/>
        <source src="./clapper.mp4" type="video/mp4"/>
    </video>
    <video id="snow" playsinline>
        <source src="./snow.webm" type="video/webm"/>
        <source src="./snow.mp4" type="video/mp4"/>
    </video>
    <video id="motion" playsinline>
        <source src="./motion.webm" type="video/webm"/>
        <source src="./motion.mp4" type="video/mp4"/>
    </video>
    <video id="circleburst" playsinline>
        <source src="./circleburst.webm" type="video/webm"/>
        <source src="./circleburst.mp4" type="video/mp4"/>
    </video>
</div>

<script src="https://daybrush.com/scenejs/release/latest/dist/scene.js"></script>
<script src="https://daybrush.com/scenejs-effects/release/latest/dist/effects.js"></script>
<script src="https://daybrush.com/scenejs-media/release/latest/dist/media.js"></script>
<script src="https://daybrush.com/scenejs-timeline/release/latest/dist/timeline.pkgd.js"></script>

<script>
    const mediaScene = new MediaScene();


    mediaScene
        .addMedia("background", "./background.mp3")
        .seek(0, 40.79)

    mediaScene
        .addMedia("clapper", document.querySelector("#clapper"))
        .seek(0, 8.1)
        .setDelay(1.15)
    mediaScene
        .addMedia("snow", document.querySelector("#snow"))
        .seek(0, 10)
        .setDelay(11.1)
    mediaScene
        .addMedia("motion", document.querySelector("#motion"))
        .seek(0, 6)
        .setDelay(20.8)
    mediaScene
        .addMedia("circleburst", document.querySelector("#circleburst"))
        .seek(0, 14)
        .setDelay(26.8)

    const scene = new Scene({
        "#clapper": {
            0: {
                opacity: 1,
            },
            0.1: {
                opacity: 0,
            },
            options: {
                delay: 11,
            },
        },
        ".square": i => ({
            0: {
                transform: {
                    rotate: "45deg",
                    scale: 0,
                },
            },
            1: {
                transform: {
                    scale: 1.2,
                }
            },
            2: {
                transform: {
                    scale: 1.2,
                },
            },
            3: {
                transform: {
                    scale: 0,
                },
            },
            options: {
                easing: "ease-in-out",
                delay: (i % 7) * 0.1 + Math.floor(i / 7) * 0.2,
            },
        }),
        "#snow": {
            0: {
                opacity: 0,
            },
            0.1: {
                opacity: 1,
            },
            10: {},
            options: {
                easing: "ease-in-out",
                delay: 11,
            },
        },
        "#motion": {
            0: {
                opacity: 0,
            },
            6: {},
            options: {
                easing: "ease-in-out",
                delay: 20.8,
            },
        },
        "#circleburst": {
            0: {
                opacity: 0,
            },
            options: {
                easing: "ease-in-out",
                delay: 26.6,
            }
        },
        "media": mediaScene,
    }, {
        selector: true,
    });

    // snow => motion
    Scene.transition(
        scene.getItem("#snow"),
        scene.getItem("#motion"),
        {
            0: "transform: translateZ(0px) scale(1.2) rotate(0deg);",
            0.8: "opacity: 1;",
            1: "transform: scale(2) rotate(40deg);opacity: 0;",
        },
    )

    // motion => circleburst
    Scene.transition(
        scene.getItem("#motion"),
        scene.getItem("#circleburst"),
        {
            0: "transform: translateZ(0px) scale(1.2) rotate(0deg);",
            0.8: "opacity: 1;",
            1: "transform: scale(2) rotate(40deg);opacity: 0;",
        },
    )
    
    scene.getItem(".square").setDelay(9);

    new Timeline(scene, document.body);
</script>